<template>
	<view class="con_zhu"> 
		<image :src="bg_img" class="bg_imgs" mode=""></image>
		<view class="content">
			<!-- 上半部分 -->
			<view class="top_v">
				<view class="imgv">
					<view class="imgvv">
						<!-- 头像 -->
						<image class="logo" :src="touxiang"></image>
					</view>
				</view>
				<view class="jieshaov">
					<view class="jiestext">
						{{name}}
					</view>

					<view class="jiestext js3">
						{{jishu_guwen}}
					</view>
					<view class="jiestext js4">
						{{gongsi}}
					</view>
				</view>
			</view>
			<!-- 下半部分 -->
			<view class="bottomv">

				<view class="boSiBu">
					<!-- 手机号 -->
					<view class="boSiBuImg">
						<image :src="phoneico" class="imgB" mode=""></image>
					</view>
					<view class="bXinxi">
						{{phonev}}
					</view>
					<view class="bOnBtn" @click="dCallNumber">
						拨打
					</view>
				</view>
				<view class="boSiBu">
					<!-- 邮箱 -->
					<view class="boSiBuImg">
						<image :src="emailico" class="imgB"></image>
					</view>
					<view class="bXinxi">
						{{emailv}}
					</view>
					<view class="bOnBtn" @click="fuzhi">
						复制
					</view>
				</view>
				<!-- 微信 -->
				<view class="boSiBu">
					
					<view class="boSiBuImg">
						<image :src="weixinico" class="imgB"></image>
					</view>
					<view class="bXinxi">
						{{weixin}}
					</view>
					<view class="bOnBtn" @click="handleClick">
						查看
					</view>
				</view>
				<!-- 地址 -->
				<view class="boSiBu">
					
					<view class="boSiBuImg">
						<image :src="dizhiico" class="imgB imgBB" mode=""></image>
					</view>
					<view class="bXinxi BAXinxi">
						{{diZhi}}
					</view>
					<view class="bOnBtn" @click="navigateToMap">
						前往
					</view>
				</view>
				<!-- 主要从事 方向 -->
				<view class="boSiBu">
					<view class="boSiBuImg">
						<image :src="worksico" class="imgB imgBB" mode=""></image>
					</view>
					<view class="bXinxi bXinXiJS">

						<span class="JieShaoWork" v-for="(item,index) in dataXX" :key="index" @click="CliCopeThis(index)" >
							{{item}}
						</span>
					</view>

				</view>

			</view>
			<uni-map :longitude="longitude" :latitude="latitude" :markers="markers"></uni-map>
			
			<!-- 底部 -->
			<!-- <view class="cunru"> -->
			<button class="cunru" @click="cunTongXinLu">存入通讯录</button>
			<!-- </view> -->

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 背景图
				bg_img:"/static/img/3d_miLS.jpg", // 3d_miLS.jpg  bg1.jpg
				// 头像
				touxiang:"/static/logo.png",
				// 名字
				name: '名字',
				//  介绍
				jishu_guwen: "XX组长",
				//  公司
				gongsi: "XXXXX有限公司",
				// ---3-333下半部分
				// 手机号
				phonev: "12345678912",
				phoneico: "/static/img/phone_ico1.png",
				// 邮箱号
				emailv: "123456789@126.com",
				emailico: "/static/img/email_ico1.png",
				// 公司地址
				diZhi: "XXXXXXXXXXXXX",
				dizhiico: "/static/img/map_ico1.png",
				// 微信号
				weixin: "15236227644",
				weixinico: "/static/img/weixin_ico1.png",
				dataXX:[
					"售后过程管理",
					"议程活动组织",
					"日常管理",
					"资源协调",

				],
				worksico:"/static/img/networks_ico.png",
				//   地图信息
				
				longitude: 111.024021,
				latitude: 29.068161,
				markers: [{
					id: 1,
					longitude: 111.024021,
					latitude: 29.068161,
					title: 'Marker',
					iconPath: '/static/marker.png',
					width: 50,
					height: 50
				}]

			}
		},
		onLoad() {

		},
		methods: {
			// 微信二维码 页面跳转
			handleClick() {
				uni.navigateTo({
					url: "/pages/SheJiaoPage/SheJiaoPage"
				})
			},
			// 点击进入拨号界面
			dCallNumber() {
				uni.makePhoneCall({
					phoneNumber:this.phonev,
					success: function() {
						console.log('success');
					},
					fail: function() {
						console.log('fail');
					}
				})
			},

			//点击复制 到剪贴板
			fuzhi() {
				uni.setClipboardData({
					data: this.emailv,
					success: function() {
						console.log('success');
					}
				})
			},

			navigateToMap() {  //点击打开地图
				// 113.051579,27.807139
				uni.openLocation({
					longitude: this.longitude,
					latitude: this.latitude,
					name: this.gongsi,
					address: 'XXXXXXXXXXXXXXXX'
				})
				// uni.setClipboardData({
				// 	data: this.diZhi,
				// 	success: function() {
				// 		console.log('地图地址信息已复制');
						
				// 		uni.navigateTo({
				// 			url: "/pages/OpenMapS/OpenMapS"
				// 		})
				// 	}
				// })

			},
			// 存入通讯录
			cunTongXinLu() {

				uni.addPhoneContact({
					nickName: this.name,			// 名字
					lastName: this.name.slice(0,1),    // 名字的  第一个  姓氏
					firstName: this.name.slice(1,3),   // 名字的  第二个  名
					remark: this.gongsi,  // 公司名
					mobilePhoneNumber: this.phonev,   //手机号
					weChatNumber: this.weixin,     // 微信号
					success: function() {
						console.log('success');
					},
					fail: function() {
						console.log('fail');
					}
				});
			},
			//   复制工作信息
			CliCopeThis(index){
				uni.setClipboardData({
					data: this.dataXX[index],
					success: function() {
						console.log('success');
					}
				})
			},
			

		}
	}
</script>

<style>

	
	.con_zhu {
		width: 100vw;
		height: 100vh;
		/* background-color: #f4f4fa; */
		 /* background-image: url("/static/img/3d_miLS.jpg") ; */
		 /* background-repeat: no-repeat; */
		 /* background-size: 100%; */
		/* font-size: 15rpx; */
	}
	.con_zhu .bg_imgs{
		width: 100%;
		height: 100%;
		z-index: 0;
		position: absolute;
		float: left;
	}

	.content {
		font-size: 22upx;
		width: 90%;
		height: 50%;

		position: absolute;
		margin: 30% 5%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 20upx;
		background-color: #ffffff;
		opacity: 0.75;
		border: #7ca9d0 solid 1upx;
		/* overflow: hidden; */
	}

	.content .top_v {
		width: 90%;
		height: 35%;
		margin: 0 5%;
		display: flex;
		border-bottom: 1rpx solid #7ca9d0;
		position: relative;
		margin-bottom: 20rpx;
		/* top: 10px; */
		/* background-color: #ffffff; */
	}
	/* 头像logo  view */
	.content .top_v .imgv {
		position: relative;
		top: 20rpx;
		height: 90%;
		width: 26%;
		/* border: 1rpx solid red; */
	}

	.content .top_v .imgv .imgvv {
		height: 145rpx;
		width: 145rpx;
		border: #7ca9d0 1rpx solid;
		/* margin-left: 20rpx; */
		border-radius: 50%;
		overflow: hidden;
	}

	.content .top_v .imgv .imgvv .logo {
		height: 146rpx;
		width: 146rpx;
	}
/* 上右部分 名字及介绍 */
	.content .top_v .jieshaov {
		position: relative;
		top: 20rpx;
		width: 69%;
		height: 90%;
		/* border:1rpx solid red ; */
		/* display: inline; */

	}

	.content .top_v .jieshaov .jiestext {
		width: 100%;
		height: 27%;
		
		/* border:1rpx solid red; */
		line-height: 40rpx;
	}
	/* 职务介绍 */
	.content .top_v .jieshaov .js3{
		color: red;
	}
	/* 公司名称 */
	.content .top_v .jieshaov .js4{
		color: #7ca9d0;
	}
	/* 下半部分 */
	.content .bottomv {
		width: 90%;
		height: 60%;
		margin: 0rpx 5%;
		position: relative;
		/* border:1rpx solid red; */
		/* top: 20rpx; */
		
	}
	/* 信息排序 */
	.content .bottomv .boSiBu {
		width: 100%;
		height: 18%;
		display: flex;
		/* border:1rpx solid red; */
	}
/* ico 图标 view */
	.content .bottomv .boSiBu .boSiBuImg {
		width: 10%;
		height: 100%;
		overflow: hidden;
		/* border:1rpx solid red; */
	}
/* ico 图标 */
	.content .bottomv .boSiBu .boSiBuImg .imgB {
		width: 40rpx;
		height: 40upx;
		position: relative;
		top: 14rpx;
	}
	/* 中间图标部分 地图 单独图标 */
	.content .bottomv .boSiBu .boSiBuImg .imgBB{
		width: 37rpx;
		height: 37rpx;
	}
	/* 中间信息 部分 */
	.content .bottomv .boSiBu .bXinxi {
		height: 100%;
		width: 70%;
		line-height: 65rpx;
		text-align: left;
		position: relative;
		/* border:1rpx solid red; */
		/* top: 7rpx; */
	}
	/* 中间信息部分  地图单独介绍 */
	/* 当超过一行时，启用 */
/* 	.content .bottomv .boSiBu .BAXinxi{
		line-height: 30rpx;
	} */
	
	/* 工作方向介绍 */
	.content .bottomv .boSiBu .bXinXiJS{
		display: inline-block;
		line-height: 30rpx;
		/* position: relative; */
	}
	.content .bottomv .boSiBu .bXinXiJS .JieShaoWork{
		width: auto;
		height: 30rpx;
		margin: 1rpx 3rpx;
		padding: 1rpx;
		border: 1rpx solid #7ca9d0;
		text-align: center;
		border-radius: 5rpx;
		display: inline-block;
	}
	/* 右边 按钮 部分 */
	.content .bottomv .boSiBu .bOnBtn {
		height: 100%;
		width: 12%;
		margin-left: 8%;
		line-height: 65rpx;
		/* border:1rpx solid red; */
		text-align: center;
		position: relative;
		color: #7ca9d0;
	}

	.content .cunru {
		position: fixed;
		width: 90%;
		/* border: 1rpx solid red; */
		bottom: 40rpx;
		color: #ffffff;
		background-color: #7ca9d0;
	}
</style>